/*
 * @Author: yangrongxin
 * @Date: 2021-08-17 17:04:34
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-09-13 17:31:39
 */
import { useState, useRef } from 'react';
import { ScrollView, View, Text } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import { ScrollContent } from '@/components/index';
import { STORAGE_TYPE } from '@/const/dataDictionary';
import { setItemSync } from '@/utils/storage';
import { TeamItem } from '../index';
import { getTeamEvaluation, getCurrentTeamAdmin } from '../../service';
import styles from './index.module.less';

const TeamAdminPage = () => {
  const [teamInfo, setTeamInfo] = useState<any>({
    teamId: '',
    name: '',
    teamNums: 0,
  });

  const scrollContentRef = useRef<any>();

  const [refresherTrigger, setRefresherTrigger] = useState<boolean>(false);

  const fetchTeamData = () => {
    scrollContentRef?.current?.reload();
    getCurrentTeamAdmin().then((res: any) => {
      if (res?.teamMainUser === 2) {
        setItemSync(STORAGE_TYPE.TEAMMAINUSER, res.teamMainUser);
        Taro.reLaunch({
          url: '/pages/Team/index',
        });
      }
    });
    setTimeout(() => {
      setRefresherTrigger(false);
    }, 500);
  };

  // 跳转到团队测评报告
  // const toTeamTestReport = () => {
  //   Taro.navigateTo({
  //     url: '/pages/TeamTestReport/index'
  //   });
  // };

  const { teamId, name, teamNums, reportNums } = teamInfo;

  return (
    <ScrollView
      scrollWithAnimation
      scrollY
      refresherEnabled
      onRefresherRefresh={() => {
        setRefresherTrigger(true);
        fetchTeamData();
      }}
      refresherTriggered={refresherTrigger}
    >
      <View className={`hxtPublicWapper ${styles.container}`}>
        {/* 展示团队切换模块 */}
        <View className={styles.teamWapper}>
          <View className={styles.teamCard}>
            {/* 展示标题 */}
            <View>
              <View className={styles.teamCardHeader}>
                <AtIcon prefixClass="icon" value="layergroup-fill" size="20" />
                <Text>{name}</Text>
              </View>
              <View>
                <View className={styles.otherCircle}>
                  <Text>团队人数</Text>
                  <Text>{teamNums}</Text>
                </View>
                {/* TODO: 目前没有团队报告暂时隐藏 */}
                <View className={styles.otherCircle}>
                  <Text>团队报告</Text>
                  <Text>{reportNums}</Text>
                </View>
              </View>
            </View>
          </View>
        </View>
        {/* 展示当前团队的测评列表 */}
        <ScrollContent
          ref={scrollContentRef}
          onLoadWhenShow
          enabledRefresh={false}
          enabledLoadingIcon={false}
          request={async (data: any) => {
            const {
              name: dataName,
              teamId: dataTeamID,
              teamNums: dataTeamNums,
              reportNums: dataReportNums,
              ...otherProps
            } = await getTeamEvaluation(data);
            setTeamInfo({
              name: dataName,
              teamId: dataTeamID,
              teamNums: dataTeamNums,
              reportNums: dataReportNums,
            });
            return otherProps;
          }}
          extendScrollContent={styles.teamList}
          params={{}}
          itemProps={{
            teamNums,
          }}
          ScrollItem={TeamItem}
        />
      </View>
    </ScrollView>
  );
};

export default TeamAdminPage;
